<template>
  <div class="lease-publish-container">
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">发布租赁设备</h2>
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/official' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'LeaseManagement' }">租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>发布租赁设备</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="main-content">
      <el-card class="form-card">
        <div slot="header" class="card-header">
          <span>填写设备信息</span>
          <el-button type="text" @click="$router.push({name: 'LeaseManagement'})">返回</el-button>
        </div>
        <el-form :model="equipmentForm" :rules="rules" ref="equipmentForm" label-width="120px" label-position="right">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="equipmentForm.name" placeholder="请输入设备名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类别" prop="category">
                <el-select v-model="equipmentForm.category" placeholder="请选择设备类别" style="width: 100%;">
                  <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="日租金(元)" prop="dailyPrice">
                <el-input-number v-model="equipmentForm.dailyPrice" :min="0" :precision="2" :step="100" style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押金(元)" prop="deposit">
                <el-input-number v-model="equipmentForm.deposit" :min="0" :precision="2" :step="1000" style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="可租数量" prop="available">
                <el-input-number v-model="equipmentForm.available" :min="1" :precision="0" :step="1" style="width: 100%;"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租赁状态" prop="status">
                <el-select v-model="equipmentForm.status" placeholder="请选择状态" style="width: 100%;">
                  <el-option label="可租" value="可租"></el-option>
                  <el-option label="已租完" value="已租完"></el-option>
                  <el-option label="维修中" value="维修中"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="设备图片" prop="images">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :file-list="equipmentForm.images"
              :on-change="handleImageChange"
              :on-remove="handleImageRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="设备描述" prop="description">
            <el-input type="textarea" v-model="equipmentForm.description" rows="4" placeholder="请详细描述设备的性能、用途和使用条件等"></el-input>
          </el-form-item>

          <el-form-item label="租赁条款" prop="terms">
            <el-input type="textarea" v-model="equipmentForm.terms" rows="3" placeholder="请输入租赁条款和注意事项"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('equipmentForm')">发布设备</el-button>
            <el-button @click="resetForm('equipmentForm')">重置</el-button>
            <el-button type="text" @click="$router.push({name: 'LeaseManagement'})">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeasePublish',
  data() {
    return {
      equipmentForm: {
        name: '',
        category: '',
        dailyPrice: 0,
        deposit: 0,
        available: 1,
        status: '可租',
        images: [],
        description: '',
        terms: ''
      },
      categories: [
        { value: '工程机械', label: '工程机械' },
        { value: '运输设备', label: '运输设备' },
        { value: '生产设备', label: '生产设备' },
        { value: '农业机械', label: '农业机械' },
        { value: '控制系统', label: '控制系统' },
        { value: '清洁设备', label: '清洁设备' },
        { value: '电子设备', label: '电子设备' },
        { value: '医疗设备', label: '医疗设备' }
      ],
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择设备类别', trigger: 'change' }
        ],
        dailyPrice: [
          { required: true, message: '请输入日租金', trigger: 'blur' },
          { type: 'number', min: 0, message: '日租金必须大于等于0', trigger: 'blur' }
        ],
        deposit: [
          { required: true, message: '请输入押金', trigger: 'blur' },
          { type: 'number', min: 0, message: '押金必须大于等于0', trigger: 'blur' }
        ],
        available: [
          { required: true, message: '请输入可租数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '可租数量必须大于等于1', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择租赁状态', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入设备描述', trigger: 'blur' },
          { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleImageChange(file, fileList) {
      this.equipmentForm.images = fileList;
    },
    handleImageRemove(file, fileList) {
      this.equipmentForm.images = fileList;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('设备发布成功！');
          setTimeout(() => {
            this.$router.push({ name: 'LeaseManagement' });
          }, 1500);
        } else {
          this.$message.error('请完善表单信息！');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.equipmentForm.images = [];
    }
  }
}
</script>

<style scoped lang="scss">
.lease-publish-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .page-header {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-content {
      .title {
        font-size: 22px;
        color: #303133;
        margin: 0 0 10px 0;
      }
    }
  }

  .main-content {
    .form-card {
      margin-bottom: 20px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .lease-publish-container {
    padding: 10px;

    .page-header {
      padding: 15px;
    }
  }
}
</style>
